<template>
  <div class="project-main">
    <div class="content">
      <div class="header">
        <span class="title">事项详情审核</span>
        <span class="back" @click="$router.go(-1)">返回</span>
      </div>
      <div class="title-info">
        基础信息
      </div>
      <div class="tips">
        <span>填报单位：{{ info.file_unit }}</span>
        <span>负责人：{{ info.file_people }}</span>
        <span>填报时间：{{ info.file_time }}</span>
      </div>
      <div class="title-info">
        {{ tipsText == "深入论证" ? "论证文件" : tipsText }}
      </div>
      <div :class="['pdf-box']" v-if="info.file_url">
        <!-- 
          tipsText == '重点项目专题报告' ? 'h-360' : ''
         -->
        <div :class="['pdf', isFull ? 'isAll' : '']">
          <div v-if="!isFull" class="full" @click="isFull = true">全屏</div>
          <div v-if="isFull" class="exit" @click="isFull = false">退出全屏</div>
          <!--  :src="info.file" -->
          <!-- <iframe
            ref="ifRame"
            style="margin-top:30px;"
            :src="
              'https://view.officeapps.live.com/op/view.aspx?src=' +
                info.file_url
            "
            frameborder="0"
          ></iframe> -->
          <iframe
            ref="ifRame"
            style="margin-top:30px;"
            :src="info.file_url"
            frameborder="0"
          ></iframe>
        </div>
      </div>
      <!-- <div class="remarks" v-if="tipsText == '重点项目专题报告'">
        <div>备注：</div>
        <div>
          <el-input
            type="textarea"
            v-model="remarks"
            placeholder="请输入备注信息"
          />
        </div>
      </div> -->
      <div class="btn-group">
        <span
          class="btn btn-2"
          v-if="tipsText == '项目投资意向书' || tipsText == '深入论证'"
          @click="over"
          >终 止</span
        >
        <span
          class="btn btn-2"
          v-if="tipsText !== '项目投资意向书' && tipsText !== '深入论证'"
          @click="reject"
          >驳 回</span
        >
        <span
          class="btn btn-1"
          v-if="tipsText == '项目投资意向书' || tipsText == '深入论证'"
          @click="stop"
          >暂 缓</span
        >
        <span class="btn btn-1" @click="pass">通 过</span>
      </div>
    </div>
    <el-dialog
      :class="[
        dialogText == '项目分级' ? 'h-300' : '',
        dialogText == '建立专班批示信息' ? 'h-520' : '',
      ]"
      :title="dialogText"
      :visible.sync="showDialog"
      @close="closeShow"
      :show-close="false"
      center
      width="780px"
    >
      <div class="d-content">
        <div
          class="textarea"
          v-if="dialogText !== '项目分级' && dialogText !== '建立专班批示信息'"
        >
          <span> {{ dialogText }} </span>
          <el-input
            v-model="textarea"
            type="textarea"
            :placeholder="'请输入' + dialogText"
          ></el-input>
        </div>
        <div class="group-radio" v-if="dialogText == '项目分级'">
          {{ dialogText }} :
          <el-radio v-model="radio" label="一般项目">一般项目</el-radio>
          <el-radio v-model="radio" label="重点项目">重点项目</el-radio>
        </div>
        <div v-if="dialogText == '建立专班批示信息'">
          <p class="label-name" style="opacity: 0.8;margin:0;">批示信息：</p>
          <el-input
            v-model="textarea"
            type="textarea"
            placeholder="请输入批示信息"
          ></el-input>
          <p class="label-name">批示文件上传：</p>
          <el-upload
            class="upload-demo"
            action=""
            ref="upload"
            accept=".docx,.pdf"
            :before-upload="beforeUpload"
            :http-request="uploadFile"
            :on-remove="handleRemove"
            :auto-upload="false"
            :file-list="fileList"
            :limit="1"
            :show-file-list="false"
            :on-change="changeFile"
          >
            <el-button size="small" type="primary">
              <img src="~@img/project/icon-add.png" alt="" />点击上传
            </el-button>
            <div slot="tip" class="el-upload__tip">
              （上传文件的类型 docx、pdf）
            </div>
          </el-upload>
          <div
            v-for="item of changeFileList"
            :key="item.name"
            class="file-list"
          >
            <img
              v-if="
                item.name.split('.')[item.name.split('.').length - 1] ==
                  'xls' ||
                  item.name.split('.')[item.name.split('.').length - 1] ==
                    'xlsx'
              "
              src="~@img/upload/icon-excel.png"
              alt=""
            />
            <img
              v-if="
                item.name.split('.')[item.name.split('.').length - 1] == 'pdf'
              "
              src="~@img/upload/icon-pdf.png"
              alt=""
            />
            <img
              v-if="
                item.name.split('.')[item.name.split('.').length - 1] == 'docx'
              "
              src="~@img/upload/icon-word.png"
              alt=""
            />

            <img src="" alt="" />
            <span class="name">{{ item.name }}</span>
            <span @click="lookFile(item)" class="img111">
              <img src="~@img/upload/icon-eye.png" alt="" />
              <span class="s">预览</span>
            </span>
            <span @click="delFile(item.uid)" class="img222">
              <img src="~@img/upload/icon-delete.png" alt="" />
              <span class="d">删除</span>
            </span>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="closeShow">
          取 消
        </el-button>
        <el-button type="primary" @click="submit">
          {{ tipsText == "深入论证" ? "提 交" : "确 定" }}
        </el-button>
      </div>
    </el-dialog>
    <div class="file-show" v-if="openFile">
      <div class="gb" @click="closeFileShow">关 闭</div>
      <iframe v-if="showFileBySrc" :src="fileSrc" frameborder="0"></iframe>
      <div v-else ref="word" class="word"></div>
    </div>
  </div>
</template>
<script>
let docx = require("docx-preview");
import { CheckProjectFile, UploadProjectFile } from "@api/project/detail";
import { AuditProjectFile, AuditProjectFile2 } from "@api/project";
export default {
  data() {
    return {
      openFile: false,
      fileSrc: "",
      showFileBySrc: "",
      changeFileList: [],
      remarks: "",
      isFull: false,
      info: {
        file: "",
      },
      tipsText: "",
      id: "",
      type: "",
      status: "",
      radio: "",
      textarea: "",
      showDialog: false,
      dialogText: "",
      fileList: [],
      token: "",
      audit_status: "",
    };
  },

  mounted() {
    let file_type_list = [
      { name: "信息台账", type: 1 },
      {
        name: "项目投资意向书",
        type: 2,
      },
      {
        name: "项目立项审批单",
        type: 3,
      },
      {
        name: "项目化台账",
        type: 4,
      },
      {
        name: "重点项目专题报告",
        type: 5,
      },
      {
        name: "项目专班",
        type: 6,
      },
      {
        name: "项目目标管理计划书",
        type: 7,
      },
      {
        name: "深入论证",
        type: 8,
      },
      {
        name: "项目合作协议（初稿）",
        type: 9,
      },
      {
        name: "项目合作协议（修改稿）",
        type: 10,
      },

      {
        name: "签约项目协议合法性审查意见",
        type: 11,
      },
      {
        name: "太原市公平竞争审查表",
        type: 12,
      },
      {
        name: "项目合作协议（送审稿）",
        type: 13,
      },
      {
        name: "综合审查",
        type: 14,
      },
      {
        name: "项目合作协议",
        type: 15,
      },
      {
        name: "综合审批",
        type: 16,
      },
      {
        name: "代办手续",
        type: 17,
      },
      {
        name: "完成情况申请验收表",
        type: 18,
      },
      {
        name: "完成情况验收表",
        type: 19,
      },
      {
        name: "申请终止（结转）审批表",
        type: 20,
      },
    ];
    let { type, id, status } = { ...this.$route.params };
    this.id = id;
    this.type = type;
    this.status = status;
    this.token = localStorage.getItem("login");
    file_type_list.map((item) => {
      item.type == type ? (this.tipsText = item.name) : "";
    });
    if (type == 2) {
      this.radio = "一般项目";
    }
    this.getCheckProjectFile();
  },
  methods: {
    closeFileShow() {
      this.openFile = false;
      this.fileSrc = "";
    },
    async getCheckProjectFile() {
      let res = await CheckProjectFile({
        file_type: this.type,
        project_id: this.id,
      });
      if (res.code && res.code == 0) {
      } else {
        this.info = {
          ...res,
          file_url: res.file_url
            ? window.location.origin + "/#/files?url=" + res.file_url
            : "",
        };
      }
    },
    beforeUpload(file, fileList) {
      this.fileName = file.name;
      const isExcel =
        file.name.split(".")[file.name.split(".").length - 1] === "pdf" ||
        file.name.split(".")[file.name.split(".").length - 1] === "docx";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        this.$message({
          message: "只能上传docx或pdf文件!",
          type: "warning",
          showClose: true,
        });
      }
      return isExcel;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.changeFileList = fileList;
    },
    changeFile(file, fileList) {
      console.log(fileList);
      this.changeFileList = fileList;
    },
    lookFile(item) {
      console.log(item);
      if (item.name.includes("pdf")) {
        this.showFileBySrc = true;
        let url = window.URL.createObjectURL(item.raw);
        this.fileSrc = url;
        this.openFile = true;
        console.log(this.fileSrc);
      } else {
        this.showFileBySrc = false;
        this.openFile = true;
        this.$nextTick(() => {
          docx.renderAsync(item.raw, this.$refs.word);
        });
      }
    },
    delFile(uid) {
      this.changeFileList.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList.splice(index, 1);
          console.log(a);
        }
      });
    },
    closeShow() {
      this.radio = "";
      this.textarea = "";
      this.audit_status = "";
      this.fileList = [];
      this.changeFileList = [];
      this.showDialog = false;
    },
    async uploadFile(params) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      let fd = new FormData();
      fd.append("project_id", this.id);
      fd.append("audit_status", this.audit_status);
      fd.append("audit_message", this.textarea);
      fd.append("file_name", params.file.name);
      fd.append("file", params.file);
      let resA = await AuditProjectFile2(fd);
      if (resA.code == 0) {
        this.fileList = [];
        this.changeFileList = [];
        this.$router.go(-1);
        this.$message.success(resA.msg);
      } else {
        this.$message.error(resA.msg);
      }
      loading.close();
    },
    submit() {
      console.log(this.textarea);
      console.log(this.audit_status);
      if (this.textarea == "" && this.dialogText !== "项目分级") {
        this.$message.warning("请输入信息！");
        return;
      }
      if (this.radio == "" && this.dialogText == "项目分级") {
        this.$message.warning("请选择级别！");
        return;
      }
      if (this.tipsText == "重点项目专题报告" && this.audit_status == 1) {
        this.$refs.upload.submit();
      } else {
        this.pushAuditProjectFile();
        // this.showDialog = false;
        // this.$router.go(-1);
      }
    },
    async pushAuditProjectFile() {
      let res = await AuditProjectFile({
        project_id: this.id,
        token: this.token,
        file_type: this.type,
        audit_status: this.audit_status,
        audit_message: this.textarea,
        project_level: this.radio,
      });
      if (res.code == 0) {
        this.$router.go(-1);
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    over() {
      this.dialogText = "终止原因";
      this.audit_status = "2";
      this.showDialog = true;
    },
    reject() {
      this.dialogText = "驳回理由";
      this.audit_status = "3";
      this.showDialog = true;
    },
    stop() {
      this.dialogText = "暂缓原因";
      this.audit_status = "0";
      this.showDialog = true;
    },
    pass() {
      this.audit_status = "1";
      if (this.tipsText == "项目投资意向书") {
        this.dialogText = "项目分级";
        this.showDialog = true;
      } else if (this.tipsText == "重点项目专题报告") {
        this.dialogText = "建立专班批示信息";
        this.showDialog = true;
      } else {
        this.pushAuditProjectFile();
        // this.$router.go(-1);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.project-main {
  background: #fafafa;
  height: 100%;
  overflow: hidden;
  text-align: left;
}
.content {
  position: relative;
  padding: 0 30px;
  margin: 0 auto;
  max-width: 1500px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(189, 189, 189, 0.6);
  overflow: hidden;
}
.header {
  position: relative;
  height: 60px;
  line-height: 60px;
  border-bottom: 4px solid rgba(204, 204, 204, 0.35);
  span.title {
    display: inline-block;
    height: 60px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
    cursor: default;
  }
  span.back {
    position: absolute;
    right: 0;
    top: 9px;
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    background: #5889dc;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
}
.tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  span {
    margin: 0 118px 0 0;
  }
}
.title-info {
  line-height: 60px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.progress {
  height: 160px;
  .e-name {
    padding: 40px 0;
    width: 260px;
    height: 160px;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    p {
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
    p:last-of-type {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
    }
  }
  .step-box {
    float: left;
    height: 160px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    li {
      padding: 20px 0 0;
      width: 140px;
      text-align: center;
      .p1 {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
      .p2 {
        position: relative;
        margin: 10px auto;
        width: 32px;
        height: 32px;
        background: #5889dc;
        border-radius: 50%;
        span.yuan {
          display: inline-block;
          margin-top: 6px;
          width: 20px;
          height: 20px;
          background: #eaf1fd;
          border-radius: 50%;
        }
        span.line {
          position: absolute;
          top: 14px;
          left: 47px;
          width: 150px;
          height: 4px;
          background: #eeeeff;
          border-radius: 2px;
        }
      }
      .p3,
      .p4 {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.pdf-box {
  height: 500px;
  border: 1px solid #666;
}

.pdf {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 999;
  iframe {
    margin-top: 0 !important;
    width: 100%;
    height: 100%;
  }
  .full {
    position: absolute;
    top: 70px;
    right: 150px;
    width: 60px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    cursor: pointer;
  }
  .exit {
    position: absolute;
    top: 70px;
    right: 40px;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #5889dc;
    z-index: 999;
    border-radius: 10px;
    cursor: pointer;
  }
}
.isAll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.progress-tips {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 34px;
  opacity: 0.8;
}
.progress-content {
  margin: 4px 0;
  padding-left: 12px;
  line-height: 32px;
  background: #f7f7f7;
  border: 1px solid #cccccc;
  opacity: 0.85;
  border-radius: 5px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.files {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  p {
    float: left;
    img,
    span {
      vertical-align: middle;
    }
    &.name {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      span {
        margin: 0 10px 0 10px;
      }
    }
    &.text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      img {
        margin-right: 4px;
        margin-left: 20px;
      }
    }
  }
}
.pdf-box.h-360 {
  height: 360px;
}
.btn-group {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;

  .btn {
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #446db3;
    border-radius: 8px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    text-align: center;
    font-weight: bold;
    margin-left: 30px;
    cursor: pointer;
  }
  .btn-2 {
    color: #446db3;
    background: #ffffff;
  }
  .btn:first-of-type {
    margin-left: -62px;
  }
  .btn-1 {
    color: #ffffff;
    background: #446db3;
  }
}
.remarks {
  margin: 20px 0 0;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 30px;
  opacity: 0.8;
}
/deep/ .el-textarea__inner {
  margin-top: 10px;
  resize: none;
  height: 85px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

/deep/ .el-dialog--center .el-dialog__body {
  padding: 30px 0;
}

/deep/ .el-dialog {
  padding: 0 88px;
  top: 50%;
  margin-top: -180px !important;
  height: 360px;
  background: #ffffff;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
  .el-dialog__header {
    padding: 0;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px dashed #dddddd;

    .el-dialog__title {
      display: block;
      line-height: 80px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -258px;
    padding: 0;
    .el-button {
      padding: 0;
      width: 248px;
      height: 48px;
      border: 2px solid #446db3;
      border-radius: 10px;
      font-size: 26px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #446db3;
    }
    .el-button--primary {
      margin-left: 20px;
      color: #fff;
      background: #446db3;
      box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    }
  }
  // .dialog-footer {
  // width: 248px;
  // margin-left: 114px;
  // }
  .d-content {
    width: 480px;
    margin: 0 auto;
    .label-name {
      margin: 10px 0 6px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      line-height: 34px;
    }
    .label-input {
      padding-left: 12px;
      width: 420px;
      height: 32px;
      line-height: 32px;
      background: #f7f7f7;
      border: 1px solid #cccccc;
      border-radius: 5px;
    }
  }
}
/deep/ .h-300 .el-dialog {
  margin-top: -150px !important;
  height: 300px;
}
/deep/ .h-300 .el-dialog--center .el-dialog__body {
  padding: 20px 0;
}
/deep/ .h-520 .el-dialog {
  margin-top: -260px !important;
  height: 520px;
}

.textarea {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  display: flex;
  justify-content: space-between;
  /deep/ .el-textarea {
    width: 390px;
    height: 128px;
    border-radius: 8px;
    border: none;
  }
  /deep/ .el-textarea__inner {
    margin: 0;
    width: 390px;
    height: 128px;
    background: #f7f7f7;
    border-radius: 8px;
    border: none;
  }
}
.group-radio {
  height: 90px;
  line-height: 90px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #666666;
  }
  /deep/ .el-radio__input {
    margin-left: 40px;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner {
    border-color: #5889dc;
    background: #5889dc;
  }
  /deep/ .el-radio__label {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
}
/deep/.el-upload__tip {
  margin-left: 16px;
  display: inline-block;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
}
/deep/ .el-button--small {
  padding: 0;
  width: 133px;
  height: 38px;
  line-height: 38px;
  background: #5889dc;
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  vertical-align: middle;
  img {
    margin-right: 5px;
    position: relative;
    left: 0;
    top: 1px;
  }
}
.file-list {
  height: 60px;
  line-height: 60px;
  cursor: default;
  span,
  img {
    vertical-align: middle;
  }
  span {
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 14px;
    font-size: 16px;
    color: #666666;
  }
  .s {
    margin: 0 10px 0 6px;
    font-size: 14px;
    color: #999999;
  }
  .d {
    margin: 0 0 0 6px;
    font-size: 14px;
    color: #999999;
  }
}
.file-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  .gb {
    position: absolute;
    right: 50px;
    top: 80px;
    font-size: 18px;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    background: #446db3;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
  .word,
  iframe {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .pdf-box {
    height: 458px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .pdf-box {
    height: 400px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .pdf-box {
    height: 458px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .pdf-box {
    height: 580px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .pdf-box {
    height: 400px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .pdf-box {
    height: 340px;
  }
}
</style>
